<script setup lang="tsx">
import { ref, computed, h } from "vue";
import vChart from "@/views/monitor/server/components/VChart.vue";
import { useCalendarHook } from "./calendarHook";
import { useChartAndTableHook } from "./chartAndTableHook";
import {
  DArrowLeft,
  ArrowLeft,
  ArrowRight,
  DArrowRight
} from "@element-plus/icons-vue";

const {
  nowYear,
  nowMonth,
  nowDay,
  disabledYear,
  disabledMonth,
  selYear,
  selMonth,
  selValue,
  calenderTitle,
  pervYearClick,
  pervMonthClick,
  nextYearClick,
  nextMonthClick,
  calendar,
  selectDate,
  dayIsHaveMonth,
  setActiveDay,
  showDateItemCell,
  showDateItemCellBottom
} = useCalendarHook();

const { activeName, options, data } = useChartAndTableHook(selValue);
</script>

<template>
  <div class="w-full h-full flex flex-col">
    <div class="w-full flex">
      <div class="rl w-1/3 pr-[20px]">
        <el-card>
          <el-calendar ref="calendar">
            <template #header>
              <div
                class="flex w-[60%] mx-[20%] h-[40px] justify-around items-center"
              >
                <div
                  :class="{
                    'cursor-not-allowed': !pervYearClick,
                    'cursor-pointer': pervYearClick
                  }"
                  @click="selectDate('prev-year')"
                >
                  <el-icon size="20"><DArrowLeft /></el-icon>
                </div>
                <div
                  :class="{
                    'cursor-not-allowed': !pervMonthClick,
                    'cursor-pointer': pervMonthClick
                  }"
                  @click="selectDate('prev-month')"
                >
                  <el-icon size="22"><ArrowLeft /></el-icon>
                </div>
                <div class="text-[22px] font-bold">{{ calenderTitle }}</div>
                <div
                  :class="{
                    'cursor-not-allowed': !nextMonthClick,
                    'cursor-pointer': nextMonthClick
                  }"
                  @click="selectDate('next-month')"
                >
                  <el-icon size="22"><ArrowRight /></el-icon>
                </div>
                <div
                  :class="{
                    'cursor-not-allowed': !nextYearClick,
                    'cursor-pointer': nextYearClick
                  }"
                  @click="selectDate('next-year')"
                >
                  <el-icon size="20"><DArrowRight /></el-icon>
                </div>
              </div>
            </template>
            <template #date-cell="{ data }">
              <div
                class="w-full h-full flex-col flex justify-center items-center"
                :class="{ 'bg-[#27a2a2]': data.day === selValue }"
                @click.stop="setActiveDay(data)"
              >
                <div>{{ showDateItemCell(data) }}</div>
                <div>{{ showDateItemCellBottom(data) }}</div>
              </div>
            </template>
          </el-calendar>
        </el-card>
      </div>
      <div class="w-2/3 flex flex-col">
        <div class="h-1/3">
          <el-card class="m-card w-full h-full">
            <div class="w-full h-full flex items-center justify-around">
              <div class="item flex items-center">
                <div class="img-l w-[80px] h-[80px] mr-[20px]">
                  <div
                    class="w-full h-full rounded-full bg-[#dde2f7] flex justify-center items-center"
                  >
                    <div
                      class="w-[90%] h-[90%] rounded-full bg-[#5575db] justify-center items-center flex"
                    >
                      <IconifyIconOnline
                        icon="tdesign:user"
                        color="#fff"
                        width="40"
                      />
                    </div>
                  </div>
                </div>
                <div class="flex flex-col">
                  <div class="flex items-end mb-[12px]">
                    <div class="text-[24px] font-bold">101.31</div>
                    <div class="text-[16px]">kWh</div>
                  </div>
                  <div class="text-[16px]">计划里程</div>
                </div>
              </div>
              <div
                class="item-line w-[1px] h-[100px] dark:bg-[#4bc4d6] bg-gray-400"
              />
              <div class="item flex items-center">
                <div class="img-l w-[80px] h-[80px] mr-[20px]">
                  <div
                    class="w-full h-full rounded-full bg-[#dde2f7] flex justify-center items-center"
                  >
                    <div
                      class="w-[90%] h-[90%] rounded-full bg-[#35b3ed] justify-center items-center flex"
                    >
                      <IconifyIconOnline
                        icon="clarity:flame-line"
                        color="#fff"
                        width="40"
                      />
                    </div>
                  </div>
                </div>
                <div class="flex flex-col">
                  <div class="flex items-end mb-[12px]">
                    <div class="text-[24px] font-bold">6</div>
                    <div class="text-[16px]">家</div>
                  </div>
                  <div class="text-[16px]">计划用户</div>
                </div>
              </div>
              <div
                class="item-line w-[1px] h-[100px] dark:bg-[#4bc4d6] bg-gray-400"
              />
              <div class="item flex items-center">
                <div class="img-l w-[80px] h-[80px] mr-[20px]">
                  <div
                    class="w-full h-full rounded-full bg-[#dde2f7] flex justify-center items-center"
                  >
                    <div
                      class="w-[90%] h-[90%] rounded-full bg-[#5085fc] justify-center items-center flex"
                    >
                      <IconifyIconOnline
                        icon="fluent:battery-8-28-regular"
                        color="#fff"
                        width="40"
                      />
                    </div>
                  </div>
                </div>
                <div class="flex flex-col">
                  <div class="flex items-end mb-[12px]">
                    <div class="text-[24px] font-bold">0</div>
                    <div class="text-[16px]">家</div>
                  </div>
                  <div class="text-[16px]">确认用户</div>
                </div>
              </div>
              <div
                class="item-line w-[1px] h-[100px] dark:bg-[#4bc4d6] bg-gray-400"
              />
              <div class="item flex items-center">
                <div class="img-l w-[80px] h-[80px] mr-[20px]">
                  <div
                    class="w-full h-full rounded-full bg-[#dde2f7] flex justify-center items-center"
                  >
                    <div
                      class="w-[90%] h-[90%] rounded-full bg-[#35b3ed] justify-center items-center flex"
                    >
                      <IconifyIconOnline
                        icon="teenyicons:calendar-plus-outline"
                        color="#fff"
                        width="40"
                      />
                    </div>
                  </div>
                </div>
                <div class="flex flex-col">
                  <div class="flex items-end mb-[12px]">
                    <div class="text-[24px] font-bold">-</div>
                    <div class="text-[16px]">kWh</div>
                  </div>
                  <div class="text-[16px]">确认里程</div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
        <div class="flex-1 pt-[20px]">
          <el-card class="m-card w-full h-full">
            <div class="w-full h-full flex flex-col">
              <div class="flex justify-center items-center w-full relative">
                <div class="text-[24px] font-bold">
                  {{ selValue }} 计划协同调节性能
                </div>
                <div class="absolute right-0 top-0 flex items-center">
                  <div class="my-btn jb my-shadow text-white mr-5">编制</div>
                  <div class="my-btn text-[#7f98f8] my-shadow mr-5">
                    优化计算
                  </div>
                  <div class="my-btn text-[#7f98f8] my-shadow">提交</div>
                </div>
              </div>
              <div class="flex-1 flex w-full">
                <div class="flex-1 flex flex-wrap justify-between">
                  <div
                    class="flex-shrink-0 w-[50%] tj-item flex items-center pl-20 pt-10"
                  >
                    <div
                      class="icon-box w-[80px] h-[80px] bg-[#1296db] rounded-full flex justify-center items-center"
                    >
                      <IconifyIconOnline
                        icon="tabler:math-max"
                        color="#fff"
                        width="40"
                      />
                    </div>
                    <div class="title-box ml-3">
                      <div class="flex items-center mb-[2px]">
                        <div class="text-[24px] mr-1">2800</div>
                        <div class="text-[16px]">kW</div>
                      </div>
                      <div class="text-[16px]">最大可调功率</div>
                    </div>
                  </div>
                  <div
                    class="flex-shrink-0 w-[50%] tj-item flex items-center pl-20 pt-10"
                  >
                    <div
                      class="icon-box w-[80px] h-[80px] rounded-full bg-[#5085fc] justify-center items-center flex"
                    >
                      <IconifyIconOnline
                        icon="streamline:graph-bar-increase"
                        color="#fff"
                        width="40"
                      />
                    </div>
                    <div class="title-box ml-3">
                      <div class="flex items-center mb-[2px]">
                        <div class="text-[24px] mr-1">25</div>
                        <div class="text-[16px]">kW/min</div>
                      </div>
                      <div class="text-[16px]">最大上调速率</div>
                    </div>
                  </div>
                  <div
                    class="flex-shrink-0 w-[50%] tj-item flex items-center pl-20 pb-10"
                  >
                    <div
                      class="icon-box w-[80px] h-[80px] bg-[#1afa29] rounded-full flex justify-center items-center"
                    >
                      <IconifyIconOnline
                        icon="icon-park-outline:electrocardiogram"
                        color="#fff"
                        width="40"
                      />
                    </div>
                    <div class="title-box ml-3">
                      <div class="flex items-center mb-[2px]">
                        <div class="text-[24px] mr-1">1208.64</div>
                        <div class="text-[16px]">kW</div>
                      </div>
                      <div class="text-[16px]">基准可调功率</div>
                    </div>
                  </div>
                  <div
                    class="flex-shrink-0 w-[50%] tj-item flex items-center pl-20 pb-10"
                  >
                    <div
                      class="icon-box w-[80px] h-[80px] rounded-full bg-[#35b3ed] flex justify-center items-center"
                    >
                      <IconifyIconOnline
                        icon="streamline:graph-bar-decrease"
                        color="#fff"
                        width="40"
                      />
                    </div>
                    <div class="title-box ml-3">
                      <div class="flex items-center mb-[2px]">
                        <div class="text-[24px] mr-1">25</div>
                        <div class="text-[16px]">kW/min</div>
                      </div>
                      <div class="text-[16px]">最大下调速率</div>
                    </div>
                  </div>
                </div>
                <div class="flex-1 flex flex-col justify-center">
                  <div
                    class="flex items-center py-3 border-bottom-f6 dark:border-[#fff]"
                  >
                    <div class="text-[18px] w-[20%]">调节时长</div>
                    <div class="text-[18px] w-[20%]">1小时</div>
                    <div class="text-[24px] w-[60%]">调节里程</div>
                  </div>
                  <div
                    class="flex items-center py-3 border-bottom-f6 dark:border-[#fff]"
                  >
                    <div class="text-[18px] w-[20%]">调节时段</div>
                    <div class="text-[18px] w-[20%]">00:00-07:00</div>
                    <div class="flex items-center w-[60%]">
                      <div class="text-[24px] mr-1">47.74</div>
                      <div class="text-[18px]">kWh</div>
                    </div>
                  </div>
                  <div class="flex items-center py-3">
                    <div class="text-[18px] w-[20%]">调节时段</div>
                    <div class="text-[18px] w-[20%]">12:00-16:00</div>
                    <div class="flex items-center w-[60%]">
                      <div class="text-[24px] mr-1">47.74</div>
                      <div class="text-[18px]">kWh</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <div class="w-full h-[500px] mt-[20px]">
      <el-card class="m-card w-full h-full">
        <div class="w-full h-full flex">
          <div class="w-[60%] h-full">
            <div class="w-full h-[60px]">
              <el-tabs v-model="activeName" type="card" class="demo-tabs">
                <el-tab-pane label="图" name="first" />
                <el-tab-pane label="表" name="second" />
              </el-tabs>
            </div>
            <div class="w-full h-[calc(100%-60px)]">
              <div v-if="activeName === 'first'" class="w-full h-full">
                <vChart :options="options" />
              </div>
              <div v-if="activeName === 'second'" class="w-full h-full">
                <el-table :data="data" style="height: 100%">
                  <el-table-column align="center" prop="0" label="时刻" />
                  <el-table-column align="center" prop="1" label="计划值" />
                  <el-table-column align="center" prop="2" label="基准值" />
                  <el-table-column align="center" prop="3" label="预测值" />
                  <el-table-column align="center" prop="4" label="价格" />
                  <el-table-column align="center" prop="5" label="计划反馈" />
                  <el-table-column align="center" prop="6" label="基准反馈" />
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-calendar-table .el-calendar-day) {
  padding: 0;
}

:deep(.m-card .el-card__body) {
  width: 100%;
  height: 100%;
}

.my-btn {
  box-sizing: border-box;
  padding: 6px 20px;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #7f98f8;
  border-radius: 6px;
}

.jb {
  background-image: linear-gradient(to right, #7667fe, #6b95f5);
  border: none;
}

.my-shadow {
  box-shadow: 0 5px 12px -2px rgb(127 152 248 / 40%);
}

.border-bottom-f6 {
  border-bottom: 1px solid #f6f6f6;
}
</style>
